<!-- 算法学习分章节展示 -->
<template>
  <div class="algorithm-learning-container">
    <el-row :gutter="20">
      <!-- 左侧章节目录 -->
      <el-col :span="4">
        <div class="chapter-menu">
          <h3 class="menu-title">算法学习章节</h3>
          <el-menu
            :default-active="activeChapter.toString()"
            class="chapter-list"
            @select="handleChapterSelect"
          >
            <el-menu-item
              v-for="chapter in chapters"
              :key="chapter.id"
              :index="chapter.id.toString()"
            >
              <span>{{ chapter.title }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>

      <!-- 右侧知识点内容 -->
      <el-col :span="20">
        <div class="knowledge-content">
          <div v-if="currentChapter" class="chapter-header">
            <h2>{{ currentChapter.title }}</h2>
            <p class="chapter-desc">点击下方知识点卡片开始学习</p>
          </div>

          <!-- 知识点卡片列表 -->
          <el-row :gutter="20" class="knowledge-cards">
            <el-col
              v-for="knowledge in knowledgeList"
              :key="knowledge.id"
              :span="12"
              :lg="8"
              :xl="6"
            >
              <el-card
                class="knowledge-card"
                shadow="hover"
                @click.native="showKnowledgeDetail(knowledge)"
              >
                <div class="card-header">
                  <h4>{{ knowledge.title }}</h4>
                </div>
                <div class="card-content">
                  <p>{{ knowledge.content }}</p>
                </div>
                <div class="card-footer">
                  <el-button
                    type="primary"
                    size="small"
                    @click.stop="markAsLearned(knowledge.chapterId)"
                  >
                    我学会了
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 知识点详情对话框 -->
    <el-dialog
      title="知识点详情"
      :visible.sync="detailDialogVisible"
      width="60%"
      :before-close="handleCloseDetail"
    >
      <div v-if="currentKnowledge" class="knowledge-detail">
        <h3>{{ currentKnowledge.title }}</h3>
        <div class="content-section">
          <h4>知识点内容：</h4>
          <p>{{ currentKnowledge.content }}</p>
        </div>
        <div v-if="currentKnowledge.exampleCode" class="code-section">
          <h4>示例代码：</h4>
          <pre><code class="python">{{ currentKnowledge.exampleCode }}</code></pre>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button
          type="primary"
          @click="markAsLearned(currentKnowledge ? currentKnowledge.chapterId : null)"
        >
          我学会了
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AlgorithmNew',
  data() {
    return {
      chapters: [], // 章节列表
      knowledgeList: [], // 当前章节的知识点列表
      currentChapter: null, // 当前选中的章节
      activeChapter: 1, // 当前激活的章节ID
      currentKnowledge: null, // 当前查看的知识点详情
      detailDialogVisible: false, // 详情对话框显示状态
    }
  },
  methods: {
    // 获取所有章节
    async getChapters() {
      try {
        const { data } = await this.$http({
          url: this.$http.adornUrl('/learn/algorithm-new/chapters'),
          method: 'get',
          params: this.$http.adornParams({})
        })
        this.chapters = data.data || []
        if (this.chapters.length > 0) {
          this.activeChapter = this.chapters[0].id
          this.currentChapter = this.chapters[0]
          this.getKnowledgeByChapter(this.chapters[0].id)
        }
      } catch (error) {
        console.error('获取章节失败:', error)
        this.$message.error('获取章节失败')
      }
    },

    // 根据章节ID获取知识点
    async getKnowledgeByChapter(chapterId) {
      try {
        const { data } = await this.$http({
          url: this.$http.adornUrl(`/learn/algorithm-new/chapters/${chapterId}/knowledge`),
          method: 'get',
          params: this.$http.adornParams({})
        })
        this.knowledgeList = data.data || []
      } catch (error) {
        console.error('获取知识点失败:', error)
        this.$message.error('获取知识点失败')
      }
    },

    // 章节选择处理
    handleChapterSelect(index) {
      const chapterId = parseInt(index)
      this.activeChapter = chapterId
      this.currentChapter = this.chapters.find(chapter => chapter.id === chapterId)
      this.getKnowledgeByChapter(chapterId)
    },

    // 显示知识点详情
    showKnowledgeDetail(knowledge) {
      this.currentKnowledge = knowledge
      this.detailDialogVisible = true
    },

    // 关闭详情对话框
    handleCloseDetail() {
      this.detailDialogVisible = false
      this.currentKnowledge = null
    },

    // 标记为已学会
    async markAsLearned(chapterId) {
      if (!chapterId) {
        this.$message.warning('章节ID不能为空')
        return
      }

      try {
        await this.$http({
          url: this.$http.adornUrl(`/learn/algorithm-new/chapter/${chapterId}/learned`),
          method: 'post'
        })
        
        this.$message({
          message: '恭喜你完成本章节学习，现在可以去做相关习题了',
          type: 'success'
        })
        
        // 关闭详情对话框
        if (this.detailDialogVisible) {
          this.detailDialogVisible = false
        }
      } catch (error) {
        console.error('标记学习进度失败:', error)
        this.$message.error('标记学习进度失败')
      }
    }
  },
  mounted() {
    this.getChapters()
  }
}
</script>

<style scoped>
.algorithm-learning-container {
  padding: 20px;
  min-height: calc(100vh - 120px);
}

.chapter-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.menu-title {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.chapter-list {
  border: none;
}

.chapter-list .el-menu-item {
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.chapter-list .el-menu-item:hover {
  background-color: #f0f9ff;
  color: #409eff;
}

.chapter-list .el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.knowledge-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  min-height: 600px;
}

.chapter-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.chapter-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.chapter-desc {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.knowledge-cards {
  margin-top: 20px;
}

.knowledge-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.knowledge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.card-content p {
  margin: 0 0 15px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card-footer {
  text-align: right;
}

.knowledge-detail h3 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.content-section,
.code-section {
  margin-bottom: 25px;
}

.content-section h4,
.code-section h4 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 16px;
  font-weight: 600;
}

.content-section p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
}

.code-section pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  margin: 0;
  overflow-x: auto;
}

.code-section code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

.dialog-footer {
  text-align: right;
}
</style> 